<template>
  <view v-if="shenheStatus == 0" class="info">
    <view class="info-title flex-row">
      <view class="info-block">
        <view class="info-up white">{{ $t('share.distribution') }}</view>
        <view class="info-bottom white">
          <view class="big bold">{{ total_price }}</view>
          <view class="bottom">{{ $t('order.integral3') }}</view>
        </view>
      </view>
      <view class="info-block">
        <navigator openType="navigate" url="/pages/cash/cash?cash_type=0">
          <view class="info-btn white big-13">{{ $t('share.detail') }}</view>
        </navigator>
      </view>
    </view>
    <view class="info-content black">
      <view class="info-label flex-y-center big-13">
        <view class="info-left text-more">{{ $t('share.canWithdraw') }}</view>
        <view class="info-right">{{ price }}{{ $t('order.integral3') }}</view>
      </view>
      <view class="info-margin">
        <view class="info-label big-13">
          <view class="border-bottom flex-y-center">
            <view class="info-left text-more">{{
              $t('share.withdrawed')
            }}</view>
            <view class="info-right"
              >{{ cash_price }}{{ $t('order.integral3') }}</view
            >
          </view>
        </view>
        <view class="info-label flex-y-center big-13">
          <view class="info-left text-more">{{ $t('share.toPay') }}</view>
          <view class="info-right"
            >{{ un_pay }}{{ $t('order.integral3') }}</view
          >
        </view>
      </view>
      <view @click="tapName" class="info-label flex-y-center big-13">
        <view class="info-left text-more">{{ $t('share.warning') }}</view>
        <view class="info-user info-right">
          <image
            :src="asyncImgs.share.down"
            style="width: 26rpx; height: 16rpx; display: inline-block"
            v-if="block"
          >
          </image>
          <image
            :src="asyncImgs.share.right"
            style="width: 16rpx; height: 26rpx; display: inline-block"
            v-else
          ></image>
        </view>
      </view>
      <view
        class="info-label flex-y-center big-13"
        style="height: auto; padding: 24rpx 24rpx"
        v-if="block"
      >
        <text style="font-size: 10pt; line-height: 1.5">{{
          share_setting.content
        }}</text>
      </view>
    </view>
    <view class="info-footer">
      <navigator openType="navigate" url="/user/shop/cash?cash_type=0">
        <view class="info-btn white text-more">{{ $t('share.withdraw') }}</view>
      </navigator>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
import shareApi from '@/api/share.js';

export default {
  components: { Shenhe },
  data() {
    return {
      block: false,
      share_setting: {},
      total_price: 0,
      price: 0,
      cash_price: 0,
      un_pay: 0,
    };
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: this.$t('title.shareMoney'),
    });
    this.share_setting = uni.getStorageSync('shareSetting');
    this.getData();
  },
  methods: {
    getData: function () {
      shareApi.getPrice({}).then(res => {
        if (res.code == 0) {
          this.total_price = res.data.price.total_price;
          this.price = res.data.price.price;
          this.cash_price = res.data.price.cash_price;
          this.un_pay = res.data.price.un_pay;
        }
      });
    },
    tapName: function () {
      this.block = !this.block;
    },
  },
};
</script>

<style scoped>
.info {
  width: 100%;
}

.white {
  color: #fff;
}

.black {
  color: #353535;
}

.big {
  font-size: 18pt;
  display: inline-block;
}

.big-13 {
  font-size: 13pt;
}

.big-14 {
  font-size: 14pt;
}

.bottom {
  font-size: 9pt;
  margin-left: 4rpx;
  display: inline-block;
}

.info-margin {
  margin: 20rpx 0;
}

.border-bottom {
  border-bottom: 1rpx #ccc solid;
  height: 100%;
}

.margin-top {
  margin-top: 20rpx;
}

.info .info-title {
  padding: 24rpx 24rpx;
  background-color: #ff4544;
  width: 100%;
}

.info .info-title .info-block {
  width: 50%;
}

.info .info-title .info-block .info-up {
  margin-top: 15rpx;
  padding-bottom: 10rpx;
}

.info .info-bottom {
  display: inline-table;
  width: 100%;
}

.info .info-block .info-btn {
  border: 1rpx #fff solid;
  border-radius: 10rpx;
  text-align: center;
  float: right;
  margin-top: 45rpx;
  padding: 6rpx;
}

.info .info-content {
  width: 100%;
}

.info .info-content .info-label {
  width: 100%;
  height: 96rpx;
  padding: 0 24rpx;
  background-color: #fff;
}

.info-content .info-label .info-left {
  width: 50%;
}

.info-content .info-label .info-right {
  width: 50%;
  text-align: right;
  color: #666666;
}

.info-footer {
  width: 100%;
  padding: 40rpx 24rpx 0 24rpx;
}

.info-footer .info-btn {
  width: 100%;
  background-color: #ff4544;
  height: 100rpx;
  border-radius: 10rpx;
  line-height: 100rpx;
  text-align: center;
}
</style>
